<template>
  <div>
    <!-- 生产运行状况 -->
    <Echart
      :options="options"
      id="bottomLeftChart"
      :height="chartHeight"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from "@/common/echart";
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    config_online: {
      type: Object,
      default: () => ({}),
    },
    chartHeight: {
      type: [Number, String],
      default: "",
    },
  },
  watch: {
    config_online: {
      handler(newData) {
        var data = {
          id: "multipleBarsLines",
          legendBar: ["一车间", "二车间"],
          xAxis: ["总设备", "运行设备", "故障设备", "离线设备"],
          yAxis: [newData.sys1, newData.sys2],
          barColor: ["#32C5E9", "#FFDB5C"], //柱子颜色 必填参数
          lineColor: ["#fd6665", "#fba73b"], // 折线颜色
        };

        var myData = (function test() {
          let yAxis = data.yAxis || [];
          let lines = data.lines || [];
          let legendBar = data.legendBar || [];
          let legendLine = data.legendLine || [];
          let seriesArr = [];
          let legendArr = [];
          yAxis &&
            yAxis.forEach((item, index) => {
              legendArr.push({
                name: legendBar && legendBar.length > 0 && legendBar[index],
              });
              seriesArr.push({
                name: legendBar && legendBar.length > 0 && legendBar[index],
                type: "bar",
                barGap: "1px",
                data: item,
                barWidth: data.barWidth || 15, //柱子的宽度
                label: {
                  normal: {
                    show: true,
                    formatter: "{c}",
                    position: "top",
                    textStyle: {
                      color: "#fff",
                      fontStyle: "normal",
                      fontFamily: "微软雅黑",
                      textAlign: "left",
                      fontSize: 10,
                    },
                  },
                },
                itemStyle: {
                  //图形样式
                  normal: {
                    barBorderRadius: 0,
                    borderWidth: 1,
                    borderColor: "#ddd",
                    color: data.barColor[index],
                  },
                },
              });
            });

          lines &&
            lines.forEach((item, index) => {
              legendArr.push({
                name: legendLine && legendLine.length > 0 && legendLine[index],
              });
              seriesArr.push({
                name: legendLine && legendLine.length > 0 && legendLine[index],
                type: "line",
                data: item,
                itemStyle: {
                  normal: {
                    color: data.lineColor[index],
                    lineStyle: {
                      width: 2, //折线宽度
                      type: "solid",
                    },
                  },
                },
                label: {
                  normal: {
                    show: false, //折线上方label控制显示隐藏
                    position: "top",
                  },
                },
                symbol: "circle",
                symbolSize: 5,
              });
            });
          return {
            seriesArr,
            legendArr,
          };
        })();
		

        //生产运行状况
        this.options = {
          tooltip: {
            trigger: "axis",
            textStyle: {
              fontSize: 12,
            },
            formatter: function(params) {
              var time = "";
              var str = "";
              for (var i of params) {
                time = i.name.replace(/\n/g, "") + "<br/>";
                if (i.data == "null" || i.data == null) {
                  str += i.seriesName + "：无数据" + "<br/>";
                } else {
                  str += i.seriesName + "：" + i.data + "<br/>";
                }
              }
              return time + str;
            },
            axisPointer: {
              type: "none",
            },
          },
          legend: {
            right: data.legendRight || "20%",
            top: 0,
            right: 10,
            itemGap: 20,
            itemWidth: 10,
            itemHeight: 15,
            data: myData.legendArr,
            textStyle: {
              color: "#fff",
              fontStyle: "normal",
              fontFamily: "微软雅黑",
              fontSize: 12,
            },
          },
          grid: {
            left: "0%",
            right: "0%",
            bottom: "5%",
            top: "10%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: data.xAxis,
            axisTick: {
              show: false,
            },

            axisLine: {
              show: false,
            },
            axisLabel: {
              //轴标
              show: true,
              interval: "0",
              textStyle: {
                lineHeight: 30,
                padding: [2, 2, 0, 2],
                height: 40,
                fontSize: 12,
                color: "#fff",
              },
              rich: {
                Sunny: {
                  height: 50,
                  //width: 60,
                  padding: [0, 5, 0, 5],
                  align: "center",
                },
              },
              formatter: function(params, index) {
                var newParamsName = "";
                var splitNumber = 5;
                var paramsNameNumber = params && params.length;
                if (paramsNameNumber && paramsNameNumber <= 4) {
                  splitNumber = 4;
                } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {
                  splitNumber = 4;
                } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {
                  splitNumber = 5;
                } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {
                  splitNumber = 5;
                } else {
                  params = params && params.slice(0, 15);
                }

                var provideNumber = splitNumber; //一行显示几个字
                var rowNumber =
                  Math.ceil(paramsNameNumber / provideNumber) || 0;
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                params = newParamsName;
                return params;
              },
              color: "#687284",
            },
          },
          yAxis: {
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#F1F3F5",
                type: "solid",
              },
              interval: 2,
            },
            splitNumber: 4, //横轴条数
          },
            series: myData.seriesArr,
        };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
